<!--
 * @Author: wang_jl
 * @Date: 2021-07-08 15:11:00
 * @LastEditTime: 2021-12-29 19:27:03
 * @LastEditors: Please set LastEditors
 * @Description: 修改手机号页
-->
<template>
  <div class="change_pan">
    <div v-if="editFormVisible" class="editPhoneForm">
      <div style="text-align: center">
        <img src="@/assets/img/login/edit.png" alt="" />
        <div style="margin: 36px 0">
          {{ LANG.CHANGE_NUM }}
        </div>
      </div>
      <fks-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="110px"
        :rules="rules"
      >
        <fks-form-item :label="LANG.PHONE" prop="phone">
          <fks-input
            v-model="form.phone"
            maxlength="11"
            oninput="value=value.replace(/[^\d]/g,'')"
            @keyup.enter.native="submit"
          />
        </fks-form-item>
        <fks-form-item :label="LANG.CAPTCHA" prop="captcha_code">
          <fks-input
            v-model="form.captcha_code"
            :placeholder="LANG.PHONE_CAPTCHA"
            class="captcha"
          >
            <fks-button
              slot="append"
              type="primary"
              :loading="smsLoading"
              @click="getPhoneCode"
            >
              <span v-if="countDown != -1 && countDown != -2" class="word">{{
                countDown + 's'
              }}</span>
              <span v-if="countDown != -1 || countDown != -2" class="word">{{
                countDown == -2 ? LANG.GET_CAPTCHA : LANG.REGAIN_CAPTCHA
              }}</span>
            </fks-button>
          </fks-input>
        </fks-form-item>
      </fks-form>
      <div class="btn-container">
        <fks-button type="primary" :loading="submitLoading" @click="submit">
          {{ LANG.CONFIRM }}
        </fks-button>
        <fks-button class="back" text @click="backToPersonalCenter">
          {{ LANG.BACK_TO_PERSONAL_CENTER }}
        </fks-button>
      </div>
    </div>
    <div v-if="resetSuccessVisible" class="resetSuccess">
      <img src="@/assets/img/login/success.png" alt="" />
      <div style="margin-top: 28px">
        {{ LANG.RESET_SUCCESS }}
      </div>
      <fks-button type="primary" @click="backToPersonalCenter">
        {{ LANG.BACK_TO_PERSONAL_CENTER }}
      </fks-button>
    </div>
  </div>
</template>
<script>
import { updataPhone, getPhoneCode } from '../api'
export default {
  name: 'ChangePhone',
  data() {
    return {
      editFormVisible: true,
      resetSuccessVisible: false,
      form: {
        phone: '',
        captcha_code: ''
      },
      smsLoading: false,
      countDown: -2,
      captcha_key: '',
      submitLoading: false
    }
  },
  computed: {
    rules() {
      return {
        phone: [
          {
            required: true,
            message: this.LANG.PHONE_NOT_EMPTY,
            trigger: 'blur'
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: this.LANG.FORMAT_ERROR
          }
        ],
        captcha_code: [
          {
            required: true,
            message: this.LANG.CAPTCHA_NOT_EMPTY,
            trigger: 'blur'
          }
        ]
      }
    },
    user() {
      return this.$store.state.user
    }
  },
  created() {
    this.form.phone = this.user.phone
  },
  methods: {
    //切换到重置成功页面
    goResetSuccess() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.editFormVisible = false
          this.resetSuccessVisible = true
        }
      })
    },
    //获取更换手机号短信验证码
    getPhoneCode() {
      if (this.countDown < 0 && this.form.phone) {
        this.smsLoading = true
        getPhoneCode({ phone: this.form.phone })
          .then((res) => {
            this.smsLoading = false
            if (res.status) {
              this.captcha_key = res.data
              this.updataCountDown()
            }
          })
          .catch((err) => {
            console.log(err)
            this.updataCountDown()
          })
      } else {
        if (this.countDown < 0) {
          this.$message.warning(this.LANG.PHONE_NOT_EMPTY)
        }
      }
    },
    //更新获取短信验证码的时间
    updataCountDown() {
      this.smsLoading = false
      this.countDown = 60
      const count = setInterval(() => {
        if (this.countDown == 0) {
          clearInterval(count)
          this.countDown = -1
        } else {
          this.countDown--
        }
      }, 1000)
    },
    //提交修改手机号
    submit() {
      this.submitLoading = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          updataPhone({
            phone: this.form.phone,
            captcha: this.form.captcha_code,
            key: this.captcha_key
          })
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.EDIT_SUCCESS)
                this.$store.dispatch('updateUser')
                this.$parent.updatePhone(this.form.phone)
                this.goResetSuccess()
              }
              this.submitLoading = false
            })
            .catch((err) => {
              this.submitLoading = false
            })
        } else {
          this.submitLoading = false
        }
      })
    },
    //返回个人中心
    backToPersonalCenter() {
      this.$parent.changePhoneVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.change_pan {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.editPhoneForm {
  width: 370px;
  margin: 0 auto;

  ::v-deep .fks-form-item__label {
    height: 40px;
    font-size: 14px;
    line-height: 40px !important;
  }

  ::v-deep .fks-form-item {
    .fks-input__inner {
      height: 40px;
      padding-right: 0;
      padding-left: 0;
      border: 1px solid rgba(225, 226, 228, 1);
      border-radius: 4px;
      font-size: 14px;
      text-indent: 16px;
      background: rgba(255, 255, 255, 1);
    }

    .captcha {
      .fks-input__inner {
        width: 150px !important;
      }
    }

    .fks-input-group__append {
      width: 100px;
      padding: 0 15px;
      border: 1px solid var(--theme-color);
      border-radius: 4px;
      text-align: center;

      .fks-button {
        padding: 8px 10px;
      }

      .word {
        height: 19px;
        font-size: 14px;
        font-family: MicrosoftYaHei, sans-serif;
        line-height: 19px;
        color: var(--theme-color);
      }
    }
  }

  .btn-container {
    width: 340px;
    margin: 56px auto 0;

    ::v-deep .fks-button {
      width: 340px;
      height: 52px;
      font-size: 18px;
    }
  }
}

.back {
  font-size: 14px !important;
}

.resetSuccess {
  width: 370px;
  margin: 0 auto;
  text-align: center;

  ::v-deep .fks-button {
    width: 340px;
    height: 52px;
    margin-top: 72px;
    font-size: 18px;
  }
}
</style>